import React, { Component } from 'react';

import MpUrl from '@/route/getparam';
import './index.scss';
import Follow from '@/components/User/widget/Follow'
import ajax from '@/api/public';
import ChartGroup from './widget/ChartGroup'
import { getCustomerInfo, getAccountFollowList, getLineChart, getCustomerChart } from '@/api/user'; 

export default class Customer extends Component{
	constructor (props) {
		super(props)
		this.state = {
			contentNumber: 0,
			chartData: '',
			data: {},
			content: '',
			accountInfo: {
				sign_name: []
			}
		}
	}
	componentDidMount () {
		let getUrl = new MpUrl()
		this.setState({
			account_user_id: getUrl.get('account_user_id'),
			employee_id: getUrl.get('employee_id')
		}, () => {
			getCustomerInfo(this.getParams()).then(res => {
				this.setState({
					accountInfo: res.data
				})
			})
			getAccountFollowList(this.getParams()).then(res => {
				this.setState({
					data: res.data,
					content: <Follow data={res.data} />
				})
			})
		})
	}
	getParams () {
		return {
			account_user_id: this.state.account_user_id,
			employee_id: this.state.employee_id
		}
	}
	changeContent (type) {
		if (type === 1) {
			this.setState({
				contentNumber: type
			})
			if (this.state.chartData === '') {
				ajax.fetchAll([getCustomerChart(this.getParams()), getLineChart(this.getParams())]).then(res => {
					console.log(res)
					this.setState({
						chartData: res,
						content: <ChartGroup data={res}/>
					})
				})
			} else {
				console.log(this.state.chartData)
				this.setState({
					content: <ChartGroup data={this.state.chartData}/>
				})
			}
		} else {
			this.setState({
				contentNumber: type,
				content: <Follow data={this.state.data} />
			})
		}
	}
	render() {
		return (
			<div className="customer-card--body">
				<div className="customer-card--title">
					<a href={`./customerDetail?account_user_id=${this.state.account_user_id}&employee_id=${this.state.employee_id}`} className="customer-card--name">
						<div className="customer-info">
							<img src={this.state.accountInfo.wx_avatar} alt='aa' />
							<div>{this.state.accountInfo.account_note}的名片</div>
						</div>
						<i className='glyphicon-right glyphicon'></i>
					</a>
					<div className="customer-card--info">
						<div>
							<span>预计成交日</span>
							<span className='number-type'>{this.state.accountInfo.employee_expect_closing_date}</span>
						</div>
						<div>
							<span>预计成交率</span>
							<span className='number-type'>{this.state.accountInfo.employee_expect_closing}</span>
						</div>
					</div>
				</div>
				<div className="customer-tags">
					<div className="customer-tag--title">
						客户标签
					</div>
					<div className='customer-tag'>
						{
							this.state.accountInfo.sign_name.map((item, index) => {
								return (
									<div key={index}>{item}</div>
								)
							})
						}
					</div>
				</div>
				<div className="switch-tap">
					<span onClick={this.changeContent.bind(this, 0)} className={!this.state.contentNumber ? 'active' : ''}>跟进</span>
					<span onClick={this.changeContent.bind(this, 1)} className={!!this.state.contentNumber ? 'active' : ''}>雷达分析</span>
				</div>
				<div>
					{this.state.content}
				</div>
			</div>
		)
	}
}